<template>
  <Dialog title="申请详情" v-model="dialogVisible" style="width: 60%" scroll :max-height="700">
    <ContentWrap class="status-bar">
      <div class="status-container">
        <div class="status-item">
          <el-icon :size="30" :color="getStatusColor(formData.status)"><Timer /></el-icon>
          <div :style="{ color: getStatusColor(formData.status) }">
            {{ getDictLabel(DICT_TYPE.JK_ORDER_STATUS, formData.status) }}
          </div>
        </div>
        <div class="info-item">
          <p class="info-label">申请编号</p>
          <div class="info-value">{{ formData.orderNo }}</div>
        </div>
        <div class="info-item">
          <p class="info-label">提交时间</p>
          <div class="info-value">{{ formatDate(formData.createTime) }}</div>
        </div>
        <div class="info-item">
          <p class="info-label">归还日期</p>
          <div class="info-value">{{ formatDate(formData.rebackTime, 'YYYY-MM-DD') }}</div>
        </div>
        <div v-if="formData.status === 2" class="reject-button-container">
          <el-button type="warning" @click="rejectDialogVisible = true">查看拒绝详情</el-button>
        </div>
      </div>
    </ContentWrap>

    <!-- 审批 -->
    <div v-if="formData.status == 1 || formData.status == 3 || formData.status == 5">
      <div class="title">审批处理</div>
      <ContentWrap style="padding: 20px">
        <el-button v-if="formData.status == 1" type="primary" @click="statusHandler('reject')"
          >驳 回</el-button
        >
        <el-button v-if="formData.status == 1" type="primary" @click="statusHandler('pass')"
          >通 过</el-button
        >
        <el-button v-if="formData.status == 3" type="primary" @click="statusHandler('out')"
          >确认出库</el-button
        >
        <el-button v-if="formData.status == 5" type="primary" @click="statusHandler('in')"
          >确认归还</el-button
        >
      </ContentWrap>
    </div>
    <!-- <div>
      <div class="title">审批处理</div>
      <ContentWrap style="padding: 20px">
        <el-button type="primary" @click="statusHandler('reject')">驳 回</el-button>
        <el-button type="primary" @click="statusHandler('pass')">通 过</el-button>
        <el-button type="primary" @click="statusHandler('out')">确认出库</el-button>
        <el-button type="primary" @click="statusHandler('in')">确认归还</el-button>
      </ContentWrap>
    </div> -->

    <!-- 样本领取地址 -->
    <div class="section-title">样本领取地址</div>
    <ContentWrap class="info-section">
      <div class="info-row">
        <p class="info-label">实验室联系人：</p>
        <p class="info-value">{{ formData.addressData?.contactName }}</p>
      </div>
      <div class="info-row">
        <p class="info-label">联系方式：</p>
        <p class="info-value">{{ formData.addressData?.contactPhone }}</p>
      </div>
      <div class="info-row">
        <p class="info-label">样本领取地址：</p>
        <p class="info-value">{{ formData.addressData?.address }}</p>
      </div>
    </ContentWrap>

    <!-- 样本信息 -->
    <div class="section-title">样本信息</div>
    <ContentWrap class="info-section">
      <div class="sample-header">
        <p class="sample-header-item">基本信息</p>
        <!-- <p class="sample-quantity">数量</p> -->
      </div>
      <div class="sample-content">
        <div class="sample-info">
          <div class="sample-image" @click="imagePreview(formData?.productData?.picture)">
            <img :src="formData?.productData?.picture" alt="" style="width: 150px; height: 100px" />
            <div class="sample-tag">{{ formData.productData?.typeName }}</div>
          </div>
          <div class="sample-details">
            <p class="sample-name">{{ formData.productData?.name }}</p>
            <p class="sample-meta">分类：{{ formData.productData?.typeName }}</p>
            <p class="sample-meta"
              >采样时间：{{ formatDate(formData.productData?.createTime, 'YYYY-MM-DD') }}</p
            >
          </div>
        </div>
        <!-- <div class="sample-quantity">1</div> -->
      </div>
    </ContentWrap>

    <!-- 申请信息 -->
    <div class="section-title">申请信息</div>
    <ContentWrap class="info-section">
      <div class="info-row">
        <p class="info-label">申请编号：</p>
        <p class="info-value">{{ formData.orderNo }}</p>
      </div>
      <div class="info-row">
        <p class="info-label">提交时间：</p>
        <p class="info-value">{{ formatDate(formData.createTime) }}</p>
      </div>
    </ContentWrap>

    <div class="summary-section">
      <!-- <div class="summary-row">
        <p class="summary-label">申请样本数量：</p>
        <p class="summary-value">1件</p>
      </div> -->
      <div class="summary-row">
        <p class="summary-label">样本领取时间：</p>
        <p class="summary-value">{{ formatDate(formData.receiveTime, 'YYYY-MM-DD') }}</p>
      </div>
      <div class="summary-row">
        <p class="summary-label">样本归还时间：</p>
        <p class="summary-value">{{ formatDate(formData.rebackTime, 'YYYY-MM-DD') }}</p>
      </div>
      <div class="summary-row">
        <p class="summary-label">领取方式：</p>
        <p class="summary-value">{{ formData.receiveType }}</p>
      </div>
    </div>

    <ContentWrap class="additional-info">
      <p>真实姓名 {{ formData.realName }}</p>
      <p>{{ formData.address }}</p>
    </ContentWrap>

    <template #footer>
      <el-button @click="dialogVisible = false">关闭</el-button>
    </template>
  </Dialog>

  <!-- 审批框 -->
  <Dialog title="确认提示" v-model="reviewDialogVisible" :close-on-click-modal="false" width="500">
    <div v-if="statusType == 'reject'">
      <el-form-item label="审批意见" prop="opinion">
        <el-input
          type="textarea"
          v-model="reviewOpinion"
          placeholder="请输入审批意见..."
          maxlength="300"
          show-word-limit
          :rows="4"
        />
      </el-form-item>
    </div>
    <div v-else style="display: flex">
      <div>
        <el-icon :size="40" color="#fc9110"><Warning /></el-icon>
      </div>
      <div style="margin-left: 10px">
        <p>是否确认此操作</p>
        <p style="color: #999">继续请点击确定按钮</p>
      </div>
    </div>
    <template #footer>
      <el-button @click="reviewDialogVisible = false">取消</el-button>
      <el-button type="primary" @click="updateHandler" :disabled="updateLoading">确定</el-button>
    </template>
  </Dialog>

  <!-- 拒绝详情弹窗 -->
  <Dialog title="拒绝详情" v-model="rejectDialogVisible" :close-on-click-modal="false">
    <div class="reject-detail-content">
      <div class="reject-icon">
        <el-icon :size="60" color="#f56c6c"><CircleClose /></el-icon>
      </div>
      <div class="reject-status">已拒绝</div>
      <div class="reject-reason">
        <p>拒绝内容：{{ formData.rejectWords || '暂无拒绝原因' }}</p>
        <p>你可再次联系工作人员重新修改资料，进行重新提单操作</p>
      </div>
    </div>
    <template #footer>
      <el-button @click="rejectDialogVisible = false">关闭</el-button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { getIntDictOptions, getDictLabel, DICT_TYPE } from '@/utils/dict'
import { JkOrderApi, JkOrderVO } from '@/api/jikong/jkOrder'
import { Timer, CircleClose, Warning } from '@element-plus/icons-vue'
import { formatDate } from '@/utils/formatTime'
import { createImageViewer } from '@/components/ImageViewer'
import { status } from 'nprogress'

/** 申请 表单 */
defineOptions({ name: 'JkOrderForm' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const rejectDialogVisible = ref(false) // 控制拒绝详情弹窗的显示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref<JkOrderVO>({})

/** 根据状态渲染颜色 */
const colorList = reactive([
  { value: 0, color: '#2ebc9b' },
  { value: 1, color: '#eb7833' },
  { value: 2, color: '#f26a6e' },
  { value: 3, color: '#f26a6e' },
  { value: 4, color: '#2ebc9b' },
  { value: 5, color: '#3c87f6' },
  { value: 6, color: '#2ebc9b' },
  { value: 7, color: '#555555' }
])

/** 获取状态对应的颜色 */
const getStatusColor = (status: number) => {
  const colorItem = colorList.find((item) => item.value === status)
  return colorItem ? colorItem.color : '#555555'
}

/** 打开弹窗 */
const open = async (type: string, id?: number) => {
  dialogVisible.value = true
  dialogTitle.value = t('action.' + type)
  formType.value = type
  // 修改时，设置数据
  if (id) {
    formLoading.value = true
    try {
      formData.value = await JkOrderApi.getJkOrder(id)
    } finally {
      formLoading.value = false
    }
  }
}

/** 单据审批 */
const statusType = ref('') // 审批状态
const reviewDialogVisible = ref(false) // 审批框
const reviewOpinion = ref(undefined) // 驳回意见
const statusHandler = (type: string) => {
  statusType.value = type
  reviewDialogVisible.value = true
}
/** 修改单据状态 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const updateLoading = ref(false)
const updateHandler = async () => {
  updateLoading.value = true
  const status =
    statusType.value == 'reject'
      ? 2
      : statusType.value == 'pass'
      ? 3
      : statusType.value == 'out'
      ? 4
      : 6
  try {
    await JkOrderApi.updateStatus({
      id: formData.value.id,
      status: status,
      rejectWords: statusType.value == 'reject' ? reviewOpinion.value : undefined
    })
    message.success(t('common.updateSuccess'))
    formData.value = await JkOrderApi.getJkOrder(formData.value.id)
    reviewDialogVisible.value = false
    // 发送操作成功的事件
    emit('success')
  } finally {
    updateLoading.value = false
  }
}

/** 预览图片 */
const imagePreview = (imgUrl: string) => {
  createImageViewer({
    urlList: [imgUrl],
    zIndex: 4000, // 动态传入更高层级，确保覆盖所有弹窗
    hideOnClickModal: true // 可选：点击遮罩关闭预览，优化体验
  })
}

defineExpose({ open }) // 提供 open 方法，用于打开弹窗
</script>

<style lang="scss" scoped>
// 状态栏样式
.status-bar {
  background-color: #f9f9f9;
}

.status-container {
  display: flex;
  align-items: center;
  padding: 20px;
}

.status-item {
  text-align: center;
  margin-right: 60px;
}

.info-item {
  text-align: center;
  margin-right: 60px;

  .info-label {
    color: #999;
    line-height: 30px;
    margin: 0;
  }

  .info-value {
    margin: 0;
  }
}

// 通用样式
.section-title {
  margin: 5px 0;
  font-weight: 500;
}

.info-section {
  margin-bottom: 15px;
}

.info-row {
  line-height: 30px;
  display: flex;
  margin-bottom: 5px;

  .info-label {
    color: #999;
    margin: 0;
    width: 100px;
  }

  .info-value {
    margin: 0;
    flex: 1;
  }
}

// 样本信息样式
.sample-header {
  display: flex;
  justify-content: space-around;
  border-bottom: 1px solid #eee;
  padding: 10px;

  .sample-header-item {
    margin: 0;
    flex: 1;
    text-align: center;

    &:first-child {
      text-align: left;
    }
  }
}

.sample-content {
  display: flex;
  padding: 10px;
  justify-content: space-around;
  align-items: center;
}

.sample-info {
  display: flex;
  flex: 1;
}

.sample-image {
  margin-right: 20px;
  position: relative;
  cursor: pointer;
}
.sample-tag {
  position: absolute;
  background: #525252;
  color: #fff;
  font-size: 12px;
  padding: 3px 8px;
  top: 0;
  left: 0;
}

.sample-details {
  line-height: 25px;
}

.sample-name {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 5px 0;
}

.sample-meta {
  color: #999;
  margin: 0 0 5px 0;
}

.sample-quantity {
  width: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

// 汇总信息样式
.summary-section {
  float: right;
  margin-bottom: 10px;

  .summary-row {
    display: flex;
    margin-bottom: 5px;

    .summary-label {
      width: 120px;
      text-align: right;
      margin: 0;
    }

    .summary-value {
      width: 120px;
      color: #ed4448;
      text-align: right;
      margin: 0;
    }
  }
}

// 附加信息样式
.additional-info {
  width: 100%;
  background-color: #f9f9f9;
  clear: both;
  padding: 10px;

  p {
    margin: 5px 0;
  }
}

// 拒绝详情按钮样式
.reject-button-container {
  float: right;
  margin: 10px 0;
}

// 拒绝详情弹窗内容样式
.reject-detail-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px;
  text-align: center;

  .reject-icon {
    margin-bottom: 16px;
  }

  .reject-status {
    font-size: 20px;
    color: #f56c6c;
    margin-bottom: 12px;
  }

  .reject-reason {
    line-height: 1.6;
    color: #606266;
    max-width: 400px;

    p {
      margin: 8px 0;
    }
  }
}
</style>
